/*
 * @Author: Zhang Kai
 * @Date: 2021-12-15 15:21:23
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-05-20 10:13:00
 * @FilePath: /metricsx-standard-ui/src/views/indexManage/dimension/components/createForm.tsx
 */
import { defineComponent, reactive, watchEffect, ref, onMounted } from 'vue';
import { setFieldsValue } from '@/utils/util';
import API from '@/services';
const createForm = defineComponent({
  name: 'CreateForm',
  props: {
    subjectList: {
      type: Array,
      default: () => []
    },
    editingData: {
      type: Object,
      default: () => {}
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    dimensionTypeList: {
      type: Array,
      default: () => []
    },
    formRef: {
      type: Object,
      default: () => {}
    },
    errorData: {
      type: Array,
      default: () => []
    }
  },
  emits: ['cancel', 'confirm'],
  setup(props, { slots, attrs, emit }) {
    const form: any = reactive({
      dimensionType: '',
      subjectId: undefined,
      dimensionClass:'',
      cnName: '',
      enName: '',
      description: '',
      businessMeaning: '',
      groupId: ''
    });

    const rules = {
      dimensionType: [
        {
          required: true,
          message: '请选择维度类型 ',
          trigger: 'change'
        }
      ],
      subjectId: [
        {
          required: true,
          message: '请选择维度主题',
          trigger: 'change'
        }
      ],
      cnName: [
        {
          required: true,
          message: '请输入名称',
          trigger: ['blur', 'change']
        }
      ],
      enName: [
        {
          required: true,
          message: '请输入维度英文名称',
          trigger: ['blur', 'change']
        }
      ],
      businessMeaning: [
        {
          required: true,
          message: '请输入业务含义',
          trigger: ['blur', 'change']
        }
      ],
      groupId: [
        {
          required: true,
          message: '请选择维度分组',
          trigger: ['blur', 'change']
        }
      ],
      dimensionClass: [
        {
          required: true,
          message: '请选择维度类别 ',
          trigger: 'change'
        }
      ],
    };

    /* 维度分组list */
    const gourpOptions = ref();

    /* 维度类别list */
    const dimentionClassList = ref();

    /* 名称重复字段及文案校验 */
    const errCheck = (label: string) => {
      const errKey = props?.errorData?.map((v: any) => v.error_field);
      if (errKey?.includes(label)) {
        const errInfo: any = props?.errorData?.filter(
          (v: any) => v.error_field === label
        );
        return new String(errInfo[0].error_msg);
      }
      return false;
    };

    /* 分组list */
    const getGroupList = async () => {
      try {
        const { code, data }: any = await API.dimension.getDimensionGroupRoot();
        if (code === 200 && Array.isArray(data?.children)) {
          gourpOptions.value = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    /* 类别API */
    const getDimentionClass = async () => {
      try {
        const { code, data } = await API.enumBao.getDimensionClass();
        if (code === 200) {
          dimentionClassList.value = data;
        }
      } catch (error) {}
    };
    onMounted(() => {
      getGroupList();
      getDimentionClass();
    });

    watchEffect(() => {
      if (!props?.isEdit) return;
      const { editingData } = props;
      setFieldsValue(form, editingData);
      //去除头一级"全部"
      editingData?.path?.shift();
      form.groupId = editingData?.path;
    });

    return () => {
      const { dimensionTypeList, subjectList, isEdit, formRef } = props;
      return (
        <>
          <el-form
            ref={formRef}
            model={form}
            rules={rules}
            label-width="100px"
            label-suffix=":"
          >
            <el-form-item label="维度类型" prop="dimensionType">
              <el-select
                size="large"
                style={{ width: '41%' }}
                v-model={form.dimensionType}
                placeholder="请选择"
              >
                {dimensionTypeList?.map((v: any) => (
                  <el-option label={v.label} value={v.value}></el-option>
                ))}
              </el-select>
            </el-form-item>

            <el-form-item label="维度主题" prop="subjectId">
              <el-select
                size="large"
                style={{ width: '41%' }}
                v-model={form.subjectId}
                placeholder="请选择"
              >
                {subjectList?.map((v: any) => (
                  <el-option label={v.subjectName} value={v.id}></el-option>
                ))}
              </el-select>
            </el-form-item>

            <el-form-item
              error={errCheck('cnName')}
              label="维度名称"
              prop="cnName"
            >
              <el-input
                size="large"
                disabled={isEdit}
                style={{ width: '41%' }}
                v-model={form.cnName}
                placeholder="请输入"
              ></el-input>
            </el-form-item>

            <el-form-item
              error={errCheck('enName')}
              label="维度英文名"
              prop="enName"
            >
              <el-input
                size="large"
                disabled={isEdit}
                style={{ width: '41%' }}
                v-model={form.enName}
                placeholder="请输入"
              ></el-input>
            </el-form-item>

            <el-form-item label="业务含义" prop="businessMeaning">
              <el-input
                size="large"
                style={{ width: '77%' }}
                v-model={form.businessMeaning}
                rows={4}
                type="textarea"
                placeholder="请输入"
              ></el-input>
            </el-form-item>

            <el-form-item label="维度分组" prop="groupId">
              <el-cascader
                size="large"
                style={{ width: '41%' }}
                v-model={form.groupId}
                options={gourpOptions.value?.children}
                props={{ label: 'name', value: 'id' }}
                onChange={(v: any) => (form.groupId = v[v.length - 1])}
              />
            </el-form-item>

            <el-form-item label="维度类别" prop="dimensionClass">
              <el-select
                size="large"
                style={{ width: '41%' }}
                v-model={form.dimensionClass}
                placeholder="请选择"
              >
                {dimentionClassList.value?.map((v: any) => (
                  <el-option label={v.label} value={v.value}></el-option>
                ))}
              </el-select>
            </el-form-item>

            <el-form-item label="备注" prop="description">
              <el-input
                size="large"
                style={{ width: '77%' }}
                v-model={form.description}
                rows={4}
                type="textarea"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="footer-btn">
            <el-button onClick={() => emit('cancel')}>取消</el-button>
            <el-button onClick={() => emit('confirm', form)} type="primary">
              确定
            </el-button>
          </div>
        </>
      );
    };
  }
});
export default createForm;
